<template>
  <van-pull-refresh v-model="refreshing" success-text="刷新成功" @refresh="onRefresh" class="hl-order-list" :class="{ 'hl-order-list-empty': list.length <= 0 }">
    <van-list v-model="loading" :finished="finished" @load="onLoad">
      <template v-if="list.length > 0">
        <sjht-card v-for="item in list" :key="item.id" :title="item.createTime.slice(0, 16)">
          <template #extra>
            <span class="hl-price">{{ item.price }}</span>
          </template>
          <sjht-detail-item title="充值编号">{{ item.rechargeNo }}</sjht-detail-item>
          <sjht-detail-item title="充值方式">{{ item.mode }}</sjht-detail-item>
        </sjht-card>
      </template>
      <template v-else>
        <van-empty v-if="!loading && !refreshing" image="search" description="暂无充值记录" />
      </template>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import Card from '../components/card'
import DetailItem from '../components/detail-item'
import { List, PullRefresh, Empty } from 'vant'
import { GetRechargePageList } from '../api/user'
export default {
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Empty.name]: Empty,
    [DetailItem.name]: DetailItem,
    [Card.name]: Card
  },
  data() {
    return {
      current: undefined,
      loading: false, //是否处于加载状态，加载过程中不触发load事件
      finished: false, //是否已加载完成，加载完成后不再触发load事件
      refreshing: false, //是否下拉刷新
      list: []
    }
  },
  methods: {
    loadList(current) {
      current = current || 1
      GetRechargePageList(current)
        .then(res => {
          this.current = res.current
          const { list } = this
          res.list.forEach(item => {
            list.push(item)
          })
          this.finished = res.current >= res.pageTotal || list.length >= res.total
        })
        .catch(err => {
          this.$toast(err)
          this.finished = true
        })
        .finally(() => {
          this.loading = false //加载状态结束
          this.refreshing = false //刷新状态结束
        })
    },
    //下拉刷新
    onRefresh() {
      this.list = []
      this.loadList(1)
    },
    //触底分页
    onLoad() {
      this.loadList(this.current + 1)
    }
  }
}
</script>
<style lang="less" scoped>
.hl-order-list {
  padding: 8px 16px;
  min-height: calc(100vh - 46px - 16px);
  &-empty {
    background-color: #fff;
  }
  /deep/.sjht-card:nth-of-type(n + 2) {
    margin-top: 8px;
  }
}
</style>
